
import { useContext, useMemo } from "react"
import { AppContext } from "../AppProvider"

//memo返回的类型
type Imemo = {
    all: number;
    completed: number;
    uncompleted: number;
}

let TodoStatus = () => {
    let { state: { data, copyData, activeButton }, dispatch } = useContext(AppContext)

    //使用memo优化

    let result = useMemo(() => {
        // console.log(data)
        return {
            all: copyData!.length,
            completed: copyData!.filter(item => item.completed).length,
            uncompleted: copyData!.filter(item => !item.completed).length
        }
    }, [data])

    return (
        <div className="status">
            <button className={activeButton == 'all' ? 'active' : ''} onClick={() => {
                dispatch({ type: 'CHANGE_STATUS', payload: 'all' })

            }}>
                <b>
                    全部
                    <i>{result.all}</i>
                </b>
            </button>
            <button
                className={activeButton == 'completed' ? 'active' : ''}
                onClick={() => {
                    dispatch({ type: 'CHANGE_STATUS', payload: 'completed' })

                }}>
                <b>
                    已完成
                    <i>{result.completed}</i>
                </b>
            </button>
            <button
                className={activeButton == 'uncompleted' ? 'active' : ''}
                onClick={() => {
                    dispatch({ type: 'CHANGE_STATUS', payload: 'uncompleted' })

                }}>
                <b>
                    未完成
                    <i>{result.uncompleted} </i>
                </b>
            </button>
        </div>
    )
}

export default TodoStatus